<template>
    <view class="bg-white min-h-full p-5 flex flex-col items-center box-border flex-1">
        <view class=" ">
            <image class="w-[150rpx] h-[150rpx] rounded-full  "
                src="https://tse1-mm.cn.bing.net/th/id/OIP-C.QIJn1EOQ92FEW541eMCFdQHaHa?rs=1&pid=ImgDetMain"
                mode="widthFix" />
        </view>
        <view class="w-full mt-[140rpx]">
            <text class="text-xl m-5 font-bold">
                注册新账号
            </text>
        </view>
        <view
            class="mt-[40rpx] w-full h-[100rpx] border border-solid border-light rounded-[10rpx] flex items-center px-[18rpx] ">
            <input v-model="formData.username" placeholder="请输入账号" placeholder-class="text-disabled" @input="" />
        </view>
        <view
            class="border border-solid border-light rounded-[10rpx] w-full h-[100rpx] mt-[40rpx] px-[18rpx] flex items-center justify-between">
            <input v-model="formData.password" :password="showPassword" placeholder="请输入密码"
                placeholder-class="text-disabled" @input="" />
            <uni-icons :type="!showPassword ? 'eye' : 'eye-slash'" size="30" @click="changePassword"></uni-icons>
        </view>
        <view
            class="border border-solid border-light rounded-[10rpx] w-full h-[100rpx] mt-[40rpx] px-[18rpx] flex items-center justify-between">
            <input v-model="formData.confirmPassword" :password="showConfirmPassword" placeholder="请再次输入密码"
                placeholder-class="text-disabled" @input="" />
            <uni-icons :type="!showConfirmPassword ? 'eye' : 'eye-slash'" size="30"
                @click="changeConfirmPassword"></uni-icons>
        </view>
        <view class="mt-[40rpx] w-full">
            <radio :checked="isRead" @click="handleChange">
                <view class="text-xs flex">我已阅读并同意
                    <view>
                        <navigator class="text-primary" url="/pages/" open-type="navigate"
                            hover-class="navigator-hover">
                            《服务协议》
                        </navigator>
                    </view>
                    和
                    <view>
                        <navigator class="text-primary " url="/pages/" open-type="navigate"
                            hover-class="navigator-hover">
                            《隐私协议》
                        </navigator>
                    </view>
                </view>
            </radio>
        </view>
        <button class="w-full bg-primary mt-[40rpx]" @click="handleRegister"><text
                class="text-base text-white ">注册</text></button>
        <view class="text-xs mt-[40rpx] ">
            <text class="absolute right-10">已有账号，返回
                <navigator class="text-primary inline" :url="`/pages/login/index?type=${LoginWayEnum.ACCOUNT}`" open-type="navigate" hover-class="navigator-hover">
                    账号登录
                </navigator>
            </text>
        </view>
    </view>
    <modalAgreementVue ref="moadalAgreementRef" v-model="isRead" @confirm="handleModalConfirm" />
</template>
<script lang="ts" setup>
import modalAgreementVue from './modalAgreement.vue'
import { registerApi } from "@/api/account"
import { LoginWayEnum } from '@/enums/appEnums'
import { useAppStore } from '@/store/modules/app'
const moadalAgreementRef = ref<InstanceType<typeof modalAgreementVue>>()
defineOptions({
    name: "register"
})
const appStore = useAppStore()  
const isRead = ref(false)
const formData = ref({
    username: "",
    password: "",
    confirmPassword: "",
    client: "h5"
})
const showPassword = ref(true)
const showConfirmPassword = ref(true)
function changePassword() {
    showPassword.value = !showPassword.value
}
function changeConfirmPassword() {
    showConfirmPassword.value = !showConfirmPassword.value
}
function handleChange() {
    isRead.value = !isRead.value
}
async function handleRegister() {
    if (!isRead.value) {
        moadalAgreementRef.value?.open()
        return
    }
    if (formData.value.password !== formData.value.confirmPassword) {
        uni.showToast({
            title: "两次密码不一致",
            icon: "none"
        })
        return
    }
    await registerApi(formData.value)
    uni.showToast({
        title: "注册成功",
        icon: "none"
    })
   
    uni.navigateBack()
}
function handleModalConfirm() {
    isRead.value = true
}
</script>